
$(document).ready(function() {

    // Kijk of er wel ingelogd is
    var user_id = getSession();


});

var getSession = function() {

    var options = {
        controller: 'user',
        action: 'session'
    };
    var call = $.apiCaller(options);

    call.then(function(result) {
        loadCars(result.data);
        handleLogin(result.data);
    });
}

var handleLogin = function(user_id) {

    if (user_id > 0) {
        $('#login-form').hide();
    }

    $('#login-button').click(function() {

        var user_loginname = $('#user_loginname').val();
        var user_password = $('#user_password').val();
        var data = {
            user_loginname : user_loginname,
            user_password: user_password
        };

        login(data);
    })
}

var loadCars = function(user_id) {

    var options = {
        controller: 'car',
        action: 'get'
    };
    var call = $.apiCaller(options);

    call.then(function(result) {

        var table = $('<table>').addClass('table');
        var tr = $('<tr>')
        tr.append($('<th>').html('&nbsp;').width(10));
        tr.append($('<th>').html('Informatie'));
        tr.append($('<th>').html('&nbsp;').width(95));
        if (user_id > 0) {

            tr.append($('<th>').html('&nbsp;').width(120));
            tr.append($('<th>').html('&nbsp;').width(120));
        }
        table.append(tr);

        $.each(result.data, function (i, item) {

            var img = $('<img>');
            img.attr('src', 'static/' + item.car_fotoURL);
            img.width(200);

            var info = '<h3>' + item.car_merk + ' ' + item.car_type + '</h3>';
            var ul = $('<ul>').addClass('unstyled');
            ul.append($('<li>').html('Motorinhoud: ' + item.car_brandstof));
            ul.append($('<li>').html('Vermogen: ' + item.car_motorinhoud));
            ul.append($('<li>').html('Bouwjaar: ' + item.car_vermogen));
            ul.append($('<li>').html('Kleur: ' + item.car_bouwjaar));

            var tr = $('<tr>')
            tr.attr('id', 'car-' + item.car_id);
            tr.append($('<td>').append(img));
            tr.append($('<td>').append(info).append(ul));

            var button = $('<a>');
            button.addClass('btn');
            button.html('<i class="icon-book"></i> &euro; ' + item.car_vraagprijs);
            button.attr({
                'data-id' : item.car_id,
                'data-toggle' : 'modal',
                'href' : '#reservate'
            });
            button.click(function() {
                $('#rese_name, #rese_telephone, #rese_price').val('');
                $('#rese_car_id').val(item.car_id);
            })

            if (user_id > 0) {
                var buttonReservate = $('<a>');
                buttonReservate.addClass('btn btn-success');
                buttonReservate.html('<i class="icon-ok"></i> Gereserveerd');
                buttonReservate.click(function() {

                    reservateCar(item.car_id);

                    $('#car-' + item.car_id).fadeOut();
                });

                var buttonDelete = $('<a>');
                buttonDelete.addClass('btn btn-danger');
                buttonDelete.html('<i class="icon-trash"></i> Verwijder');
                buttonDelete.click(function() {

                    deleteCar(item.car_id);

                    $('#car-' + item.car_id).fadeOut();
                })
            }

            tr.append($('<td>').html(button));

            if (user_id > 0) {
                tr.append($('<td>').html(buttonReservate));
                tr.append($('<td>').html(buttonDelete));
            }
            table.append(tr);
        });

        $('#reservate-button').attr('data-loading-text', '1 moment geduld aub..');
        // Knop om te reserveren
        $('#reservate-button').click(function() {

            var data = {
                rese_car_id : $('#rese_car_id').val(),
                rese_name: $('#rese_name').val(),
                rese_telephone : $('#rese_telephone').val(),
                rese_price : $('#rese_price').val()
            }
            bookCar(data);
        });

        $('#cars').append(table);
    });
}

var login = function (data) {

    var options = {
        controller: 'user',
        action: 'login'
    };
    $.extend(options, data);

    var call = $.apiCaller(options);
    call.then(function(result) {
        if (!result.data) {
            alert('Onjuiste gegevens ingevuld');
            return false;
        }

        $('#login-form').fadeOut();
        $('#login-success').fadeIn();
    });
}

var bookCar = function(data) {

    var options = {
        controller: 'car',
        action: 'book'
    };
    $.extend(options, data);
    console.log(options);

    var call = $.apiCaller(options);

    call.then(function(data) {
        if (data.success) {
            $('#reservate').modal('hide');
            $('#reservate-button').attr('data-loading-text', '');
            $('#reservate-success').fadeIn();
        }
    });
}

var deleteCar = function(data) {

    var options = {
        controller: 'car',
        action: 'delete'
    };
    $.extend(options, data);

    var call = $.apiCaller(options);

    call.then(function(data) {

    });
}


var reservateCar = function(data) {

    var options = {
        controller: 'car',
        action: 'reservate'
    };
    $.extend(options, data);

    var call = $.apiCaller(options);
    call.then(function(data) {

    });
}


$.apiCaller = function(options) {

    var url = 'api/index.php';

    // Standaard opties
    var defaults = {}

    $.extend(defaults, options);

    var deferred = $.Deferred();

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'json',
        data : defaults,
        success: deferred.resolve
    });
    return deferred.promise();
}